<template>
  <div class="login">
    <div class="tab">
      <el-link type="primary" :underline="false" v-if="configLogin.user == 1">密码登录</el-link>
      <el-link type="info" :underline="false" @click="jumpVerify" v-if="configLogin.verify == 1"
        >验证码登录</el-link
      >
    </div>
    <el-form
      v-if="configLogin.user == 1"
      :model="userLoginForm"
      :rules="userLoginRules"
      ref="userLoginForm"
    >
      <el-form-item label="账号" prop="user">
        <el-input v-model="userLoginForm.user" placeholder="输入您的账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="userLoginForm.password"
          placeholder="输入您的密码"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="space-between" align="middle" class="modify">
        <el-link type="info" :underline="false" @click="gopwdReset">忘记密码？</el-link>
        <el-row type="flex" align="middle">
          <span class="no-text">还没有账号？</span>
          <el-link type="primary" :underline="false" @click="goRegister">马上去注册</el-link>
        </el-row>
      </el-row>
      <el-form-item>
        <el-button class="login-submit" type="primary" @click="handleAccountLogin('userLoginForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    <user-other></user-other>
  </div>
</template>

<script>
import UserOther from './loginOther'
import md5 from 'spark-md5'
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  components: {
    UserOther
  },
  data() {
    // 账号的校验
    var testAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    // 密码的验证
    var testPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      userLoginForm: {
        logintype: 'user',
        user: '',
        password: ''
      },
      userLoginRules: {
        user: [{ validator: testAccount, trigger: 'blur' }],
        password: [{ validator: testPassword, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters({
      configLogin: 'projectSetting/getGlobLoginConfig'
    })
  },
  created: function() {
    // 登录回车事件
    document.onkeydown = e => {
      var key = window.event.keyCode
      if (key == 13) {
        this.handleAccountLogin('userLoginForm')
      }
    }
  },
  methods: {
    handleAccountLogin(formName) {
      var that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          store
            .dispatch('user/verifyLogin', {
              ...that.userLoginForm,
              password: md5.hash(that.userLoginForm.password)
            })
            .then(res => {
              that.$message.success(res.msg) // 登录成功提示
              that.$emit('handleSuccess') // 登录成功返回关闭弹窗
              that.$refs[formName].resetFields() // 登录成功重置表单
            })
            .catch(err => {
              that.$message.error(err.msg)
            })
        } else {
          return false
        }
      })
    },
    jumpVerify() {
      this.$emit('currentTab', 'login_verify')
    },
    goRegister() {
      this.$emit('currentTab', 'login_register')
    },
    gopwdReset() {
      this.$emit('currentTab', 'login_password')
    }
  }
}
</script>
